<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>内容提示词选择器</title>
  <link rel="stylesheet" href="./lib/elementui.css" />
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    .el-input-group--append .el-input__inner, .el-input-group__prepend{
      height: 32px;
      background-color: #24262a;
      border: 1px solid #333;
      color: #fff;
    }

    .el-input__icon {
      line-height: 35px;
      cursor: pointer;

    }

    .el-input-group__append,
    .el-input-group__prepend {
      background-color: #24262a;
      border: 1px solid #333;
    }

    .actived {
      color: #fff !important;
      background: linear-gradient(to right, #34353a 0%, #1b1d21 100%);
      font-weight: bolder;
      border-radius: 5px;
    }

    ::-webkit-scrollbar {
      display: none
    }

    [contenteditable] {
      outline: 1px solid #333;
    }
  </style>

</head>

<body>
  <div id="app">
    <a @click.prevent="openBox"><i class="fa fa-edit"></i> 快捷编辑</a>

    <!-- 装配提示词 弹窗 -->
    <div v-show="selectVisible" @click.self="closeBox"
      style="width: 100vw;height: 100vh;position: fixed;top:0; left:0;z-index:9999;background-color: #ccc;display: flex;align-items: center;justify-content: center;">
      <div
        style="width: 1400px; height: 700px; background-color: #24262a; color: #eee; padding: 20px 30px;border-radius: 10px; box-shadow: 0 0 15px #666;position: relative;">
        <div style="display: flex;justify-content: space-between;align-items: center;height: 60px;">
          <h2 style="font-size: 22px; color: #ccc;font-weight: bolder;letter-spacing: 1px;">
            {{ tipsLangStatus ? 'Copy Prompts' : '文案提示词' }}</h2>
          <el-autocomplete class="inline-input" v-model.trim="searchKey" style="width:320px;"
            :fetch-suggestions="querySearch" :placeholder="!tipsLangStatus ? '试试搜索 抖音' : 'Try Search TickTok' "
            :trigger-on-focus="false" @select="handleSelect"><el-button slot="append"
              icon="el-icon-search"></el-button></el-autocomplete>
          <i class="el-icon-close" style="font-size: 28px; padding: 10px;cursor: pointer;" @click="closeBox"></i>
        </div>
        <!-- 分割线 -->
        <div style="border-bottom: 1px solid #333; margin-top: 10px;margin-bottom: 1px;"></div>

        <div style="margin-top: 20px;display: flex;">
          <div style="width: 50%;display: flex;flex-direction: row;font-size: 14px;">
            <!-- 第一级分类 -->
            <div style="
                  padding: 10px;
                  margin-right: 15px;
                  width: 190px;
                  height: 525px;
                  overflow: auto;
                  background-color: #1b1d21;
                  border-radius: 10px;
                ">
              <div type="info" v-for="(item, index) in dataList" :class="choseTipPath[0]==index ? 'actived': ''"
                @click="choseFir(index)" style="
                overflow: hidden; 
                white-space: nowrap;  
                text-overflow: ellipsis;
                line-height: 32px;
                text-align: left;
                width: 135px;
                display: block;
                padding: 3px 10px;
                cursor: pointer;
                color: #888;
                ">
                {{tipsLangStatus ? item.tname : item.cname}}
              </div>
            </div>
            <!-- 第二级分类 -->
            <div style="
                  padding: 10px;
                  margin-right: 15px;
                  width: 190px;
                  height: 525px;
                  overflow: auto;
                  background-color: #1b1d21;
                  border-radius: 10px;
                ">
              <div type="info" v-for="(item, index) in sectypes" :class="choseTipPath[1]==index ? 'actived': ''"
                @click="choseSec(index)" style="
                overflow: hidden; 
                white-space: nowrap;  
                text-overflow: ellipsis;
                line-height: 32px;
                text-align: left;
                width: 135px;
                display: block;
                padding: 3px 10px;
                cursor: pointer;
                color: #aaa;
                ">
                {{tipsLangStatus ? item.tname : item.cname}}
              </div>
            </div>
            <!-- 第三级分类 -->
            <div style="
                  margin-right: 5px;
                  padding: 10px;
                  width: 190px;
                  height: 525px;
                  overflow: auto;
                  background-color: #1b1d21;
                  border-radius: 10px;
                ">
              <div type="info" v-for="(item, index) in thirdatas" :class="choseTipPath[2]==index ? 'actived': ''"
                @click="choseThir(index)" style="
                overflow: hidden; 
                white-space: nowrap;  
                text-overflow: ellipsis;
                line-height: 32px;
                text-align: left;
                width: 135px;
                display: block;
                padding: 3px 10px;
                cursor: pointer;
                color: #ccc;
                ">
                {{ tipsLangStatus ? item.tname : item.cname }}
              </div>
            </div>
          </div>

          <!-- 右侧展示栏目 -->
          <div style="margin-left: 20px;">
            <div
              style="display: flex;align-items: center;justify-content: space-between;width: 710px; margin-top: 10px;">
              <span style="font-size: 21px;color: #ccc;line-height: 32px;">{{ tipsLangStatus ? choseTip.tname :
                choseTip.cname }}</span>
              <div style="display: flex;align-items: center;justify-content: space-between;">
                <img src="./images/cat.png" alt="翻译" style="width: 21px;margin-right: 5px;" />
                <el-switch v-model="tipsLangStatus" active-color="#007cba" inactive-color="#333"
                  @change="getTipinfo"></el-switch>
              </div>
            </div>
            <div style="margin-top: 10px; color: #999; font-size: 14px;" v-if="tipsLangStatus">
              Reminder Template - <span style="color:#91b5e5;font-weight: bolder;">Double click</span> Replace the
              content
              in blue brackets</div>
            <div style="margin-top: 10px; color: #999; font-size: 14px;" v-else>
              提示词模版 - <span style="color:#91b5e5;font-weight: bolder;">双击</span> 编辑替换蓝色括号中的内容
            </div>
            <div
              style="color:#fff;line-height: 24px;font-size:14px;background-color: #1b1d21;padding: 0 20px;border: 1px solid #222;margin-top: 20px;height: 455px; border-radius: 10px;"
              contenteditable="true" @input="getMyDiscInput" @dblclick="getMyDiscInput" ref="myinputbox">
              <div v-html="disc" style="margin: 10px 0;"></div>
            </div>

          </div>
        </div>

        <!-- 底部元素 -->
        <div style="display: flex; justify-content: flex-end;margin-top: 20px;">
          <div type="primary" @click="confirm"
            style="margin-right: 10px; margin-left: 40px;background-color: #333;padding: 10px 20px;border-radius: 10px; cursor: pointer; color: #ccc;">
            {{ tipsLangStatus ?
            'Use Current Copy' : '使用当前文案' }}</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<!-- 导包，导入相关框架依赖及基础数据结构 -->
<script src="./lib/vue.js"></script>
<script src="./lib/elementui.js"></script>
<script src="./lib/axios.js"></script>
<script src="./lib/dataListOther.js"></script>
<script>

  new Vue({
    el: "#app",
    data() {
      return {
        // 控制提示词选择器弹框
        selectVisible: false,
        // 搜索提示词关键字
        searchKey: '',
        // 提示词中英文状态
        tipsLangStatus: false,
        // 提示词基础数据
        dataList: dataListOther,
        // 当前选中被操作的提示词，层级路径
        choseTipPath: [0, 0, 0],
        // 需要提交的 提示词
        editTip: ''
      }
    },
    mounted() {
      this.getTipinfo();
      // 双击 v-html 的内容，基于事件委托的方案，删除对应的内容
      document.ondblclick = function (e) {
        if (e.target.className === "myChose") {
          e.target.innerHTML = "　";
          window.getSelection().collapse(e.target, 1);
        }
      }
    },
    computed: {
      // 二级分类
      sectypes() {
        return this.dataList[this.choseTipPath[0]].children
      },
      // 三级数据
      thirdatas() {
        return this.dataList[this.choseTipPath[0]].children[this.choseTipPath[1]].children
      },
      // 选中的提示词
      choseTip() {
        return this.dataList[this.choseTipPath[0]].children[this.choseTipPath[1]].children[this.choseTipPath[2]];
      },
      // 选中提示词的描述
      disc() {
        if (this.tipsLangStatus) {
          return this.choseTip.disc.replace(/\[(.+?)\]/g, "<font style='color:#91b5e5;cursor:pointer;' class='myChose'> [ $1 ] </font>");
        } else {
          return this.choseTip.cinfo.replace(/\[(.+?)\]/g, "<font style='color:#91b5e5;cursor:pointer;' class='myChose'> [ $1 ] </font>");
        }
      }
    },
    methods: {
      // 展开提示词选择的弹窗
      openBox() {
        this.choseFir(0);
        this.selectVisible = true;
      },
      closeBox() {
        this.selectVisible = false;
      },
      // 获取提示词提交信息
      getTipinfo() {
        this.editTip = this.disc;
      },
      // 点击一级选项
      choseFir(index) {
        this.choseTipPath = [index, 0, 0];
        this.getTipinfo();
      },
      // 二级选择
      choseSec(index) {
        this.choseTipPath = [this.choseTipPath[0], index, 0];
        this.getTipinfo();
      },
      // 提示词选择
      choseThir(index) {
        this.choseTipPath[2] = index;
        this.choseTipPath = [...this.choseTipPath];
        this.getTipinfo();
      },
      // 输入内容，匹配可以选择的 提示词
      querySearch(queryString, cb) {
        console.log(queryString);
        const results = []
        for (let i = 0; i < this.dataList.length; i++) {
          for (let j = 0; j < this.dataList[i].children.length; j++) {
            for (let k = 0; k < this.dataList[i].children[j].children.length; k++) {
              if (this.dataList[i].children[j].children[k].tname.toLowerCase().indexOf(this.searchKey.toLowerCase()) > -1 || this.dataList[i].children[j].children[k].cname.indexOf(this.searchKey) > -1) {
                // 只要符合就添加进数据
                results.push({
                  ...this.dataList[i].children[j].children[k],
                  value: this.dataList[i].children[j].children[k].cname + '-' + this.dataList[i].children[j].children[k].tname,
                  path: [i, j, k]
                })
              }
            }
          }
        }
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      // 点击下拉框，选中一个元素
      handleSelect(item) {
        this.choseTipPath = item.path;
      },
      // 获取提示词输入内容
      getMyDiscInput() {
        const timer = setTimeout(() => {
          this.editTip = this.$refs.myinputbox.innerHTML;
          clearTimeout(timer);
        }, 100)
      },
      confirm() {
        if (this.tipsLangStatus) {
          this.editTip = this.editTip.replaceAll(/<[^>]+>/g, "").replaceAll(/&nbsp;/g, "").replaceAll(/\[/g, "").replaceAll(/\]/g, "").replaceAll(/\s+/g, " ").replaceAll(/　/g, " ");
        } else {
          this.editTip = this.editTip.replaceAll(/<[^>]+>/g, "").replaceAll(/&nbsp;/g, "").replaceAll(/\[/g, "").replaceAll(/\]/g, "").replaceAll(/\s+/g, "").replaceAll(/　/g, "");
        }
        this.selectVisible = false;
        $("#prompts_main").val(this.editTip);
        $("#scene").val(this.dataList[this.choseTipPath[0]].tname);
        $("#subject").val(this.dataList[this.choseTipPath[0]].children[this.choseTipPath[1]].tname);
      }

    },
  });

</script>